<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI CELL 源码</title>
    <style>
        /* css reset*/
        *{
            margin:0;
            padding:0;
            outline:0;/* 不影响盒子模型计算的边框*/
        }
        /* inherit 会继承的css*/
        html{
            -ms-text-size-adjust:100%;
            /* chrome 为首 360 浏览器 老年机 强制放大文字  不允许缩放文字*/
            -webkit-text-size-adjust:100;
        }
        body,html{
            height:100%;
            /* 按上去的高亮颜色 移动端独有  任何元素的高亮给干掉*/
            -webkit-tap-hightlight-color:transparent;
        }
        .text{
            -webkit-tap-hightlight-color:green;
        }
        body{
          /* 苹果  安卓  鸿蒙  默认添加苹果系统*/
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    --weui-BG-0:#111;
    --weui-BG-2:#191919;
    --weui-FG-0:rgba(255,255,255,0.8);
    --weui-FG-1:rgba(255,255,255,0.5);
    --weui-FG-2:rgba(255,255,255,0.3);
    --weui-FG-3:rgba(255,255,255,0.1);
        }
        .page,body{
            /* css 变量  css2 css3 css4
            多次使用 */
            background-color: var(--weui-BG-0);
        }
        .weui-cells__title{
            margin-top: 16px;
        margin-bottom: 3px;
        padding-left: 16px;
        padding-right: 16px;
        color: var(--weui-FG-1);
        font-size: 14px;
        line-height: 1.4;
        }
        .weui-cells{
            margin-top:8px;
            background-color: var(--weui-BG-2);
            overflow: hidden;
            position: relative;
        }
        .weui-cells:before {
            /* before css 伪元素 元素开始之前 content 必须有 */
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    /* 1px 边框在高清手机中还是有点粗 0.5px*/
    border-top: 1px solid rgba(0,0,0,0.1);
    border-top: 1px solid var(--weui-FG-3);
    color: rgba(0,0,0,0.1);
    color: var(--weui-FG-3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
}

        /* title 有时候会加  不加  */
        .weui-cells__title+.weui-cells{
            margin-top:0;
        }
        .weui-cell{
            /* 弹性布局早期叫box布局*/
            padding: 16px;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        /* 纵轴的对齐方式   默认垂直 */
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        /* 8位 好精密*/
        line-height: 1.41176471;
        font-size: 17px;
        color: rgba(0,0,0,0.9);
        color: var(--weui-FG-0);

        }
        .weui-cell__bd{
            /* 主元素  早期 box-flex*/
            -webkit-box-flex:1;
            -webkit-flex:1;
            flex:1;
            min-width:0;
        }
        .weui-cell__ft{
            color:var(--weui-FG-1);
        }
        .weui-cell_access .weui-cell__ft:after {

content: '';
display: block;
width: 8px;
height: 8px;
border-top: 1px solid white;
border-right: 1px solid white;
transform: rotate(45deg);
}
a{
    text-decoration: none;
}
.weui-cell__desc {
        font-size: 12px;
        color: var(--weui-FG-2);
        line-height: 1.4;
        padding-top: 4px;
    }

    </style>
</head>
<body>
    <!-- <a href="javascript:;" class="text">text 一下</a> -->
    <div class="weui-cells__title">设置</div>
    <div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="" alt="" style="width: 20px; margin-right: 16px; display: block;">

        </div>
        <div class="weui-cell__bd">蓝牙</div>
        <div class="weui-cell__ft">打开</div>
    </div>
    </div>
    <div class="weui-cell">

        <div class="weui-cell__hd">
            <img src="" alt="" style="width: 20px; margin-right: 16px; display: block;">
        </div>
        <div class="weui-cell__bd">蜂窝网络</div>
        <div class="weui-cell__ft">打开</div>
    </div>
</div>
<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
    <a href="" class="weui-cell weui-cell_access">
        <div class="weui-cell__hd">
            <img src="" alt="" style="width: 20px; margin-right: 16px; display: block;">
        </div>
        <div class="weui-cell__bd">蓝牙</div>
        <div class="weui-cell__ft"></div>
    </a>
</div>
<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
    <a href="" class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <span>蓝牙</span>
            <div class="weui-cell__desc">副标题</div>
        </div>
        <div class="weui-cell__ft"></div>
    </a>
</div>
</body>
</html>